<template>
	<view class="center">
		<!-- 案件受理 -->
		<xbd-page-card>
			<template>
				<view class="title">
					基本信息
				</view>
				<image v-if="photo!==''" class="avatar" :src="photo"></image>
				<image v-else class="avatar"src="@/static/image/avatar.png" ></image>
				<view class="tag">
					<view class="left">姓名</view>
					<view class="right">{{myInfo.name || '-'}}</view>
				</view>
				<view class="tag">
					<view class="left">性别</view>
					<view class="right">{{myInfo.gender || '-'}}</view>
				</view>
				<view class="tag">
					<view class="left">出生年月</view>
					<view class="right">{{ myInfo.birthday | timeFormat('YYYY-MM') || '-'}}</view>
				</view>
				<view class="tag">
					<view class="left">民族</view>
					<view class="right">{{myInfo.nation || '-'}}</view>
				</view>
				<view class="tag">
					<view class="left">籍贯</view>
					<view class="right">{{myInfo.native || '-'}}</view>
				</view>
				<view class="tag">
					<view class="left">出生地</view>
					<view class="right">{{myInfo.birthplace || '-'}}</view>
				</view>
				<view class="tag">
					<view class="left">入党时间</view>
					<view class="right">{{ myInfo.party_time  | timeFormat('YYYY-MM-DD') ||'-'}}</view>
				</view>
				<view class="tag">
					<view class="left">参加工作时间</view>
					<view class="right">{{myInfo.work_time | timeFormat('YYYY-MM')}}</view>
				</view>
				<view class="tag">
					<view class="left">健康状况</view>
					<view class="right">{{myInfo.health || '-'}}</view>
				</view>
				<view class="tag">
					<view class="left">专业技术职务</view>
					<view class="right">{{myInfo.technical_job || '-'}}</view>
				</view>
				<view class="tag">
					<view class="left">专业专长</view>
					<view class="right">{{myInfo.profession || '-'}}</view>
				</view>
				<view class='border-box'>
					<view class="left">学历学位</view>
					<view class='border'>
						<view style="margin-bottom: 20rpx;">
							<view class="left">全日制教育</view>
							<view class="bot">{{myInfo.education[0] || '-'}}</view>
						</view>
						<view >
							<view class="left">毕业院校系及专业</view>
							<view class="bot">{{myInfo.education[1] || '-'}}</view>
						</view>
					</view>
					<view class='border'>
						<view style="margin-bottom: 20rpx;">
							<view class="left">在职教育</view>
							<view class="bot">{{myInfo.education[2]|| '-'}}</view>
						</view>
						<view>
							<view class="left">毕业院校系及专业</view>
							<view class="bot">{{myInfo.education[3] || '-'}}</view>
						</view>
					</view>
				</view>

				<view class="tag">
					<view class="left">现任职务</view>
					<view class="right">{{myInfo.now_job || '-'}}</view>
				</view>
				<view class="tag">
					<view class="left">拟任职务</view>
					<view class="right">{{myInfo.imitate_job || '-'}}</view>
				</view>
				<view class="tag">
					<view class="left">拟免职务</view>
					<view class="right">{{myInfo.remove_job || '-'}}</view>
				</view>
			</template>
		</xbd-page-card>
		<xbd-page-card>
			<template>
				<view>
					<view class="title">
						简历
					</view>
					<view v-if="myInfo.resume.length !==0 && myInfo.length!==0">
						<view class="company-card" v-for="(item,index) in myInfo.resume" :key="index">
							<view class="company">{{item.company}}</view>
							<view class="time">
								<text>{{item.start_time | timeFormat('YYYY-MM-DD')}}</text>至
								<text>{{item.end_time | timeFormat('YYYY-MM-DD')}}</text>
								<text class="job">{{item.job}}</text>
							</view>
						</view>
					</view>
					<view v-else>
						-
					</view>
				</view>
			</template>
		</xbd-page-card>

		<!-- 奖惩情况 -->
		<xbd-page-card>
			<template>
				<view>
					<view class="title">
						奖惩情况
					</view>
					<view v-if="myInfo.prize_punish.length !==0&& myInfo.length!==0">
						<view class="company-card" v-for="(item,index) in myInfo.prize_punish" :key="index">
							<view class="company">{{item.detail}}</view>
							<view class="time">
								<text>{{item.time | timeFormat('YYYY-MM-DD')}}</text>
							</view>
						</view>
					</view>
					<view v-else>
						-
					</view>

				</view>
			</template>
		</xbd-page-card>

		<!-- 年度考核结果 -->
		<xbd-page-card>
			<template>
				<view>
					<view class="title">
						年度考核结果
					</view>
					<view class="text">
						<parser v-if="myInfo.check_result" :html="myInfo.check_result" :tagStyle='style' />
						<text v-else>-</text>
					</view>
				</view>
			</template>
		</xbd-page-card>

		<!-- 任免理由 -->
		<xbd-page-card>
			<template>
				<view>
					<view class="title">
						任免理由
					</view>
					<view class="text">
						{{myInfo.appointment_remove|| '-'}}
					</view>
				</view>
			</template>
		</xbd-page-card>

		<!-- 家庭主要成员及重要社会关系 -->
		<xbd-page-card>
			<template>
				<view>
					<view class="title">
						家庭主要成员及重要社会关系
					</view>
					<view v-if="myInfo.family.length !== 0 && myInfo.length!==0">
						<view class="border" v-for="(item,index) in myInfo.family" :key="index">
							<view class="tag">
								<view class="left2">称谓</view>
								<view class="right2">{{item.title}}</view>
							</view>
							<view class="tag">
								<view class="left2">姓名</view>
								<view class="right2">{{item.name}}</view>
							</view>
							<view class="tag">
								<view class="left2">出生年月</view>
								<view class="right2">{{item.time | timeFormat('YYYY-MM')}}</view>
							</view>
							<view class="tag">
								<view class="left2">政治面貌</view>
								<view class="right2">{{item.politics}}</view>
							</view>
							<view class="tag">
								<view class="left2">工作单位及职务</view>
								<view class="right2">{{item.work}}</view>
							</view>
						</view>
					</view>
					<view v-else>
						-
					</view>

				</view>
			</template>
		</xbd-page-card>

		<!-- 呈报单位意见 -->
		<xbd-page-card>
			<template>
				<view>
					<view class="title">
						呈报单位意见
					</view>
					<view class="text">
						<parser v-if="myInfo.report" :html="myInfo.report" :tagStyle='style' />
						<text v-else>-</text>
					</view>
				</view>
			</template>
		</xbd-page-card>

		<!-- 审批意见及任免意见 -->
		<xbd-page-card>
			<template>
				<view>
					<view class="title">
						审批意见及任免意见
					</view>
					<view v-if="myInfo.audit_opinion.length !==0 && myInfo.length!==0">
						<view class="border" v-for="(item,index) in myInfo.audit_opinion" :key="index">
							<view class="left3">党委审批意见</view>
							<view class="right3">{{item.audit||'-'}}</view>
							<view class="left">审批时间</view>
							<view class="right">{{item.audit_time||'-'}}</view>
						</view>
					</view>
					<view v-else>-</view>

					<view v-if="myInfo.remove_opinion.length !==0&& myInfo.length!==0">
						<view class="border" v-for="(item,index) in myInfo.remove_opinion" :key="index">
							<view class="left3">行政任免意见</view>
							<view class="right3">{{item.remove||'-'}}</view>
							<view class="left">审批时间</view>
							<view class="right">{{item.remove_time||'-'}}</view>
						</view>
					</view>
					<view v-else>-</view>

				</view>
			</template>
		</xbd-page-card>
	</view>
</template>

<script>
	import parser from '@/components/jyf-parser/jyf-parser.vue';
	export default {
		name: "First",
		components: {
			parser
		},
		props: {
			myInfo: {},
			photo:''
		},
		data() {
			return {
				style: {
					'img': 'display:block;margin: 0 auto;max-width:100%;height:auto; transform: translateX(0);',
					'video': 'width:100%;height:auto;',
				},
			}
		},
	};
</script>

<style lang="scss" scoped>
	.center {
		padding: 32rpx;
		position: relative;

		.avatar {
			position: absolute;
			top: 170rpx;
			right: 66rpx;
			width: 160rpx;
			height: 160rpx;
		}

		.tag {
			display: flex;
			// align-items: center;
			margin-top: 30rpx;

			&:nth-last-child(1) {
				margin-bottom: 30rpx;
			}
		}

		.border {
			width: 620rpx;
			margin-top: 10rpx;
			box-sizing: border-box;
			padding:  20rpx 32rpx 32rpx;
			background: #ffffff;
			border: 2rpx solid #ebeef5;
			border-radius: 12rpx;
			margin-bottom: 20rpx;

			.left {
				width: 220rpx !important;
				margin-bottom: 20rpx;
			}
			.bot{
				flex-shrink: 0;
				font-weight: 400;
				font-size: 30rpx;
				color: #000623;
				word-wrap: break-word;
				word-break: break-all;
				white-space: pre-wrap;
			}
		}

		.right {
			width: 380rpx;
			flex-shrink: 0;
			font-weight: 400;
			font-size: 30rpx;
			color: #000623;
			word-wrap: break-word;
			word-break: break-all;
			white-space: pre-wrap;
		}

		.border-box {
			margin-top: 30rpx;
		}

		.left {
			flex-shrink: 0;
			width: 180rpx;
			font-size: 26rpx;
			color: #A0A7B8;
			margin-right: 20rpx;
		}

		.right2 {
			width: 350rpx;
			font-weight: 400;
			font-size: 30rpx;
			color: #000623;
			word-wrap: break-word;
			word-break: break-all;
			white-space: pre-wrap;
		}

		.left2 {
			// width: 180rpx;
			width: 210rpx;
			font-size: 28rpx;
			color: #A0A7B8;
			margin-right: 20rpx;
		}

		.left3 {
			// width: 180rpx;
			// width: 210rpx;
			font-size: 28rpx;
			color: #A0A7B8;
			margin-right: 20rpx;
			margin-bottom: 20rpx;
		}

		.right3 {
			// width: 350rpx;
			font-weight: 400;
			font-size: 30rpx;
			color: #000623;
			word-wrap: break-word;
			word-break: break-all;
			white-space: pre-wrap;
			margin-bottom: 30rpx;
		}

		.title {
			font-size: 36rpx;
			font-weight: 800;
			color: #000623;
			margin-bottom: 32rpx;
		}

		.text {
			font-size: 32rpx;
			font-weight: 400;
			color: #000623;
			line-height: 48rpx;
		}

		.company-card {
			padding: 30rpx 0;
		}

		.company {
			font-size: 32rpx;
			font-weight: 400;
			color: #000623;
			margin-bottom: 16rpx;
		}

		.time {
			font-size: 26rpx;
			font-weight: 400;
			color: #8890a5;
		}

		.job {
			margin-left: 30rpx;
			font-size: 28rpx;
			color: #2E73FC;
		}
	}
</style>
